---
title: ToolGroup
---

import { Steps, Step } from "fumadocs-ui/components/steps";

## Overview

The ToolGroup component wraps consecutive tool-call message parts, enabling you to create custom presentations for grouped tool calls such as collapsible sections and custom styling.

### Use it in your application

Pass the `ToolGroup` component to the `MessagePrimitive.Parts` component

```tsx twoslash title="/components/assistant-ui/thread.tsx"
import { FC, PropsWithChildren } from "react";
import { MessagePrimitive } from "@assistant-ui/react";

const AssistantActionBar: FC = () => null;
const BranchPicker: FC<{ className?: string }> = () => null;

// ---cut---
const ToolGroup: FC<
  PropsWithChildren<{ startIndex: number; endIndex: number }>
> = ({ startIndex, endIndex, children }) => {
  const toolCount = endIndex - startIndex + 1;

  return (
    <details className="my-2">
      <summary className="cursor-pointer font-medium">
        {toolCount} tool {toolCount === 1 ? "call" : "calls"}
      </summary>
      <div className="space-y-2 pl-4">{children}</div>
    </details>
  );
};

const AssistantMessage: FC = () => {
  return (
    <MessagePrimitive.Root className="...">
      <div className="...">
        <MessagePrimitive.Parts components={{ ToolGroup }} />
      </div>
      <AssistantActionBar />

      <BranchPicker className="..." />
    </MessagePrimitive.Root>
  );
};
```

## Props

The ToolGroup component receives the following props:

- `startIndex`: The index of the first tool call in the group
- `endIndex`: The index of the last tool call in the group
- `children`: The rendered tool call components

## Examples

### Collapsible Tool Group

```tsx
const ToolGroup: FC<
  PropsWithChildren<{ startIndex: number; endIndex: number }>
> = ({ startIndex, endIndex, children }) => {
  const toolCount = endIndex - startIndex + 1;

  return (
    <details className="my-2">
      <summary className="cursor-pointer font-medium">
        {toolCount} tool {toolCount === 1 ? "call" : "calls"}
      </summary>
      <div className="space-y-2 pl-4">{children}</div>
    </details>
  );
};
```

### Styled Tool Group with Header

```tsx
const ToolGroup: FC<
  PropsWithChildren<{ startIndex: number; endIndex: number }>
> = ({ startIndex, endIndex, children }) => {
  return (
    <div className="bg-muted/50 my-2 rounded-lg border p-4">
      <div className="text-muted-foreground mb-2 text-sm">
        Tool execution #{startIndex + 1}-{endIndex + 1}
      </div>
      <div className="space-y-2">{children}</div>
    </div>
  );
};
```
